<template>
    <div :class="cns">
        <action-bar v-vheight="collapsed" :class="titleCns" @click="toggle">
            <ph-icon v-if="collapsable" :icon="icon"></ph-icon>
            {{title}}
        </action-bar>
        <div class="ph-panel-body" :style="{height:contentHeight}">
            <slot></slot>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref } from 'vue'
import {PhIcon} from '../base'
import ActionBar from '../base/action-bar.vue'
export default defineComponent({
    directives:{
        vheight:{
            mounted(el:HTMLElement,binding:any){
                const {value} = binding,
                pe = el.parentElement as HTMLElement,
                oh = el.offsetHeight;
                pe.style.height = value?(oh+"px"):""
            },
            beforeUpdate(el:HTMLElement,binding:any){
                const {value} = binding,
                pe = el.parentElement as HTMLElement,
                oh = el.offsetHeight,
                h = value?oh:pe.scrollHeight;
                if(pe.style.height==="")pe.style.height=pe.offsetHeight+"px"
                setTimeout(()=>{
                    pe.style.height = h+"px"
                })
            }
        }
    },
    props:{
        title:{type:String},
        type:{type:String},
        contentHeight:{type:String},
        collapsable:{type:Boolean,default:false},
        collapse:{type:Boolean,default:false}
    },
    components:{PhIcon,ActionBar},
    setup(props) {
        const collapsed = ref(props.collapse);
        const icon = computed(()=>{
            return collapsed.value?"caret-right":"caret-down";
        })
        const cns = computed(()=>{
            const cns = ["ph-panel"]
            if(collapsed.value)
                cns.push("ph-panel-collapse")
            if(props.type)
                cns.push("ph-panel-"+props.type)
            return cns
        })
        const titleCns = computed(()=>{
            const cns = ["ph-panel-title"]
            if(props.collapsable)
                cns.push("ph-pointer")
            return cns
        })
        return {cns,titleCns,collapsed,icon}
    },
    methods:{
        toggle(){
            if(!this.collapsable)return
            this.collapsed=!this.collapsed
        }
    }
})
</script>
<style lang="scss">
@import '../../assets/scss/predef.scss';
.ph-panel{
    flex: 0 0 auto;
    border-width: 1px;
    border-style: solid;
    position: relative;
    overflow: hidden;
    margin-bottom: var(--ph-20);
    border-radius: 8px 8px 0 0;
    transition: height .3s ease;
    
    --ph-panel-color:var(--ph-c);
    --ph-panel-bg:var(--ph-light-l1);
    --ph-panel-bd:var(--ph-bd-light);
    &-success{
        --ph-panel-color:var(--ph-success-color);
        --ph-panel-bg:var(--ph-success-bg);
        --ph-panel-bd:var(--ph-success-bd);
    }
    &-primary{
        --ph-panel-color:var(--ph-primary-color);
        --ph-panel-bg:var(--ph-primary-bg);
        --ph-panel-bd:var(--ph-primary-bd);
    }
    &-danger{
        --ph-panel-color:var(--ph-danger-color);
        --ph-panel-bg:var(--ph-danger-bg);
        --ph-panel-bd:var(--ph-danger-bd);
    }
    &-info{
        --ph-panel-color:var(--ph-info-color);
        --ph-panel-bg:var(--ph-info-bg);
        --ph-panel-bd:var(--ph-info-bd);
    }
    &-warning{
        --ph-panel-color:var(--ph-warning-color);
        --ph-panel-bg:var(--ph-warning-bg);
        --ph-panel-bd:var(--ph-warning-bd);
    }
    &-collapse{
        .ph-panel-title{
            border-bottom: none!important;
        }
    }
    .ph-panel-title{
        z-index: 1;
        border-top: none;
        border-left: none;
        border-right: none;
        justify-content: flex-start;
        user-select: none;
        color:var(--ph-panel-color);
        background-color:var(--ph-panel-bg);
        border-bottom:1px solid var(--ph-panel-bd);
    }
    .ph-panel-body{
        padding: var(--ph-10) var(--ph-15);
        background-color: #fff;
        color: var(--ph-c);
        overflow: auto;
        -webkit-overflow-scrolling:touch;
    }
    border:1px solid var(--ph-panel-bd);
}
</style>
